<template>
    <div class="showBook">
        <button @click="toeasybrokenlist()">索引</button>
        <div class="partmenu">
            <el-carousel height="100%" arrow="always" indicator-position="none" :interval=5000>
                <el-carousel-item v-for="(item,key) in menuList" :key="item.id">
                    <h3>{{ item.id }}.{{item.systemName}}</h3>
                    <div class="img"  @click="toOperatemanual(key)">
                        <img v-lazy="item.imageUrl" width="100%"/>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
    import { getPartMenu} from "../url";
    import {ERROR_OK} from "../constVar";

    export default {
        data(){
            return {
                hostId:1,
                num:0,
                btntext:'',
                menuList:[],
                oldMenuList:[],
            }
        },
        methods:{
            async _getPartMenu(hostId) {
                let {status,data} = await getPartMenu(hostId);
                if(status === ERROR_OK){
                    this.menuList = data;
                }else {
                    this.menuList = [];
                }
            },
            toeasybrokenlist(){
                this.$router.push({name:'easybrokenlist',query:{id:this.hostId}});
            },
            toOperatemanual(key){
                this.$router.push({name:'operatemanual',query:{hostId:this.hostId,id:this.menuList[key].id,imageUrl:this.menuList[key].imageUrl}});
            }
        },
        created() {
            this.hostId = this.$route.query.id || 1;
            this._getPartMenu(this.hostId);
        }
    }
</script>

<style scoped lang="scss">
    .showBook{position: relative;}
    button{
        position: absolute;
        z-index: 99;
        top: -50px;
        line-height: 1.5;
        display: inline-block;
        font-weight: 400;
        text-align: center;
        cursor: pointer;
        border: 1px solid #1890ff;
        white-space: nowrap;
        padding: 0 15px;
        font-size: 14px;
        border-radius: 4px;
        height: 32px;
        user-select: none;
        color: #fff;
        background-color: #1890ff;
        margin: 0px auto;
        outline: none;
    }
    .partmenu{
        height: 700px;
        width: 30%;
        overflow: auto;
        margin: 100px auto;
    }
    .el-carousel{
        position: relative;
        z-index: 999;
        height: 750px;
        h3{
          line-height: 30px;
          color: white;
          font-size: 18px;
          background-color: #2c3e50;
        }
    }
</style>



